<template>
 <!-- :style='{height:curHeight}'  -->
  <div class="login-container flexRow"  :style="{'height':curHeight}" >
    <div class="login-div flexRow">
      <!-- <div class="bgImg flexColumn"> -->
        <!-- <img src="../assets/logo.jpg" /> -->
        <!-- <img src="@/assets/icon-logo.png" /> -->
        <!-- <p class="logo-name">小宠悠悠</p> -->
      <!-- </div> -->
      <div class="formWrap flexColumn">
        <el-form ref="loginForm" :model="loginForm" class="login-form flexColumn" autocomplete="on" label-position="left">
          <div class="title-container">
             <img src="@/assets/icon-logo.png" />
            <p>悠悠后台管理系统</p>
          </div>
          <el-form-item prop="userName">
            <el-input class="iptCont" placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="loginForm.userName"></el-input>
          </el-form-item>
          <!-- <el-tooltip content="Caps lock is On" placement="right" manual> -->
          <el-form-item prop="pwd">
            <el-input class="iptCont" placeholder="请输入密码" type="password" prefix-icon="el-icon-unlock" v-model="loginForm.pwd" ></el-input>
          </el-form-item>
          <!-- <el-form-item prop="code" class="codeWrap">
            <el-input placeholder="请输入验证码" v-model="loginForm.code" @keyup.enter.native="handleLogin">
              <template slot="append">
                <el-button v-show="sendAuthCode" @click="getAuthCode">获取验证码</el-button>
                <el-button v-show="!sendAuthCode">
                  剩余
                  <span class="auth_text_blue">{{auth_time}}</span> 秒
                </el-button>
              </template>
            </el-input>
          </el-form-item> -->
          <!-- </el-tooltip> -->
          <el-button class="submitBtn" :loading="loading" :disabled="loading" type="primary" @click.native="handleLogin">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import {loginUrl} from "@/utils/common";

export default {
  name: "Login",
  components: {},
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error("请输入用户名"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    // const validateCode = (rule, value, callback) => {
    //   if (!value) {
    //     callback(new Error("请输入验证码"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      sendAuthCode: true /*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */,
      auth_time: 0 /*倒计时 计数器*/,
      loginForm: {
        userName: null,
        pwd: null,
        email: null,
      },

      loginRules: {
        userName: [{ required: true, trigger: "blur", validator: validateUsername }],
        pwd: [{ required: true, trigger: "blur", validator: validatePassword }],
        // code: [{ required: true, trigger: "blur", validator: validateCode }],
      },
      passwordType: "password",
      loading: false,
      editableTabs:[]
    };
  },
  watch: {},
  computed: {
    curHeight: function () {
      return (window.innerHeight) + 'px'
    }
  },
  created() { },
  mounted() { },
  destroyed() { },
  methods: {
    handleLogin() {
      if (!this.loginForm.userName) {
        this.$message({ type: "warn", message: "账号/手机号不能为空!" });
        return;
      }
      if (!this.loginForm.pwd) {
        this.$message({ type: "warn", message: "密码不能为空!" });
        return;
      }
    //   if (!this.loginForm.code) {
    //     this.$message({ type: "warn", message: "验证码不能为空!" });
    //     return;
    //   }
      this.loading = true;
      var md5 = require("md5");

      let userJson = JSON.stringify(this.loginForm);
      let user = JSON.parse(userJson);
      user.pwd = md5(user.pwd);

      this.axios
        .post(loginUrl, user)
        .then((response) => {
            this.loading = false;
          if (response.data.status == "SUCCESS") {
            
            this.$router.push("/index");
            sessionStorage.setItem("user", JSON.stringify(response.data.data));
            
          } else {
            this.$alert(response.data.result, "错误提示", {
              confirmButtonText: "确定",
              callback: (action) => {   
                console.log(action);
              },
            });
          }
        })
        .catch((response) => {
            this.loading = false;
          console.log("response -   " + response);
          this.$alert("服务器异常，请稍后重试！", "错误提示", {
              confirmButtonText: "确定",
              
            });
        });
    },
    getAuthCode: function () {
      this.sendAuthCode = false;
      this.axios.post("/fc/sms/send/" + this.loginForm.account).then((res) => {
        this.$message({ type: "warn", message: "验证码已发送至" + res.data.data });
      }).catch(() => console.log('promise catch err')); //捕获异常;
      this.auth_time = 60;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
  },
};
</script>
<style>
.el-input--prefix .el-input__inner {
  padding-left: 70px !important;
  /* padding-left: 0.7rem !important; */
  /* font-size: 22px !important; */
}
.iptCont .el-input__icon {
  /* line-height: 0.62rem !important;
  font-size: 0.3rem;
  margin: 0 0.2rem; */
  line-height: 62px !important;
  font-size: 30px;
  margin: 0 20px;
}
.iptCont .el-input__inner {
  /* height: 0.62rem !important;
  border-radius: 0.33rem !important; */
  height: 62px !important;
  border-radius: 10px !important;
  border:1px solid #eee;
}
.codeWrap .el-form-item__content .el-input__inner,
.codeWrap .el-form-item__content .el-input {
  height: 62px !important;
  border-radius: 33px !important;
  /* height: 0.62rem !important;
  border-radius: 0.33rem !important; */
}
.codeWrap .el-input-group__append {
  border: none !important;
  background: transparent !important;
}
</style>
<style lang="less" scoped>
.login-container {
  // background: #eff2f7;
 
  &:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    filter:blur(5px);
    position: absolute;
    background-image: url('../assets/bg-banner.jpg');
     background-position:center;
  background-repeat: no-repeat;
  background-size: cover;
  }
}
.login-div {
  overflow: auto;
  /* width: 12.7rem;
  height: 7.66rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.1rem 0 rgba(0,0,0,0.1);
  */
  width: 900px;
  height: 566px;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}
.bgImg {
  /* width: 5.6rem;
  height: 7.66rem;
  padding: 0.5rem 0.1rem; */
  position: relative;
  padding: 50px 10px;
  box-sizing: border-box;
  background: #f3f7f9;
  .logo-name{
    font-size: 40px;
  }
}
.bgImg img {
  object-fit: contain;
}
.bgImg img {
  width: 200px;
  
  /* width: 3.95rem;
  height: 4.12rem; */
}
/* .bgImg img:first-child {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 100px;
  height: 50px;
  /* right: 0.4rem;
  top: 0.4rem;
  width: 2rem;
  height: 1rem; 
} */
.formWrap {
  width: 600px;
  height: 566px;
  padding: 100px 84px;
  /* width: 7.1rem;
  height: 7.66rem;
  padding: 1rem 0.84rem; */
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
}
.login-form {
  justify-content: space-around;
}
.title-container {
  font-size: 30px;
  margin-bottom: 50px;
  width: 430px;
  img{
    width: 100px;

  }
  p{
    // font-weight: bold;
    padding-top: 10px;
  }
}
.el-form-item {
  width: 380px;
  /* margin-bottom: 35px !important; */
  /* width: 4.22rem;
  margin-bottom: 0.35rem !important; */
}
.el-input__prefix {
  font-size: 30px !important;
  /* font-size: 0.3rem !important; */
}
.el-button--primary.submitBtn {
  padding: 0 !important;
  width: 380px;
  height: 62px;
  line-height: 62px;
  font-size: 24px;
  border-radius: 33px;
  /* width: 4.22rem;
  height: 0.62rem;
  line-height: 0.62rem;
  font-size: 0.24rem;
  border-radius: 0.33rem; */
  background-color: #f0c64d;
  color: #000;
  margin-top: 50px;
}
.el-button--primary {
  border: none !important;
}
</style>
